<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            color:orange;
        }
    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(f);

        function f(){
            // css 函数的四个用法
            // 1.css(样式名) 返回值就是样式值(获取元素的样式值)
            //alert($("div").css("background-color"));
            // 2.css(样式名,样式值) 给某一个元素设置样式值
            //$("div").css("background","green");
            //3 css(对象) 给一个元素批量设置样式
             /*
            $("div").css({
                width:"100px",
                height:"100px",
                "background-color":"blue"
            });
            */
            //4.css(样式名,函数) 样式回调函数
           $("div").click(function(){
               $(this).css("width",function(index,value){
                  return parseFloat(value)*1.102;
               });
           });
        }
    </script>
</head>
<body>
<p>123</p>
    <div style="width:100px;height:100px;background:red;"></div>
    <div style="width:200px;height:100px;background:green;"></div>
    <div style="width:300px;height:100px;background:blue;"></div>
</body>
</html>